<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>简单单页路由</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="libs/bootstrap/4.0.0-beta.3/bootstrap.min.css">
    <script src="libs/jquery/3.2.1/jquery.js"></script>
    <script src="libs/propper.js/1.13.0/umd/popper.js"></script>
    <script src="libs/bootstrap/4.0.0-beta.3/bootstrap.min.js"></script>
    <style>
        #main-view {
            background: #3b76c0;
        }

        .pageview {
            height: 400px;
        }
    </style>
</head>
<script>
    function tobool(value) {
        return !!value;
    }

    function GroupRouter() {
        const self = {
            routers: [],
            add: function (router) {
                self.routers.push(router);
            },
            routeto: function (path) {
                for (var router of self.routers) {
                    if (router.has(path)) {
                        return router.routeto(path);
                    }
                }
            },
            onhashchange: function () {
                var path = window.location.hash;
                self.routeto(path);
            }
        };
        return self;
    }

    function Router(defaultPath) {
        const self = {
            routes: {},
            defaultPath: defaultPath,
            currentPath: defaultPath,
            add: function (path, callback) {
                if (!self.has(path)) {
                    self.routes[path] = callback || self.switch;
                }
                console.assert(self.has(path));
            },
            switch: function (path, prevpath) {
                console.log(`${prevpath} -> ${path}`);
                $(prevpath).css('display', 'none');
                $(path).css('display', 'block');
            },
            remove: function (path) {
                if (self.has(path)) {
                    delete self.routes[path];
                }
                console.assert(!self.has(path));
            },
            has: function (path) {
                return tobool(self.routes[path]);
            },
            routeto: function (path) {
                if (path.length == 0) {
                    path = self.defaultPath;
                }
                if (self.has(path)) {
                    self.routes[path](path, self.currentPath);
                    self.currentPath = path;
                }
                else {
                    console.log('页面未找到' + path);
                }
            },
            onhashchange: function () {
                var path = window.location.hash;
                self.routeto(path);
            }
        };
        return self;
    }

    const mainRouter = new GroupRouter();
    $(document).ready(function () {
        const router0 = new Router('#main-view');
        router0.add('#main-view');
        router0.add('#list-view');
        router0.add('#detail-view');
        mainRouter.add(router0)
        const router1 = new Router('#main2');
        router1.add('#main2');
        router1.add('#list2');
        router1.add('#detail2');
        mainRouter.add(router1)

        window.onhashchange = mainRouter.onhashchange;
        mainRouter.onhashchange();
    })
</script>

<body>
    <nav class="navbar navbar-expand-sm bglight">
        <a class="nav-item nav-link" href="#main-view">首页</a>
        <a class="nav-item nav-link" href="#list-view">列表页面</a>
        <a class="nav-item nav-link" href="#detail-view">列表详情页面</a>
        <a class="nav-item nav-link" href="#main2">首页2</a>
        <a class="nav-item nav-link" href="#list2">列表页面2</a>
        <a class="nav-item nav-link" href="#detail2">列表详情页面2</a>
    </nav>

    <div class="row">
        <div class='col-sm'>
            <div class="pageview" id='main-view'>
                <h3>首页</h3>
                <div title="-list-view" class='right-arrow'></div>
            </div>
            <div class="pageview" style="background: #58c03b;display: none" id="list-view">
                <h3>列表页面</h3>
                <div class="left-arrow"></div>
                <div title="-detail-view" class="right-arrow"></div>
            </div>
            <div class="pageview" style="background: #c03b25;display: none" id="detail-view">
                <h3>列表详情页面</h3>
                <div class="left-arrow"></div>
            </div>
        </div>
        <div class='col-sm'>
            <div class="pageview" style="background: #3b76c0;" id='main2'>
                <h3>首页2</h3>
                <div title="-list-view" class='right-arrow'></div>
            </div>
            <div class="pageview" style="background: #58c03b;display: none" id="list2">
                <h3>列表页面2</h3>
                <div class="left-arrow"></div>
                <div title="-detail-view" class="right-arrow"></div>
            </div>
            <div class="pageview" style="background: #c03b25;display: none" id="detail2">
                <h3>列表详情页面2</h3>
                <div class="left-arrow"></div>
            </div>
        </div>
    </div>
</body>

</html>